<template>
    <div class="login-preview">
        <div class="login-preview-slice-content" v-if="backgroundType === 'slice'">
            <div class="login-preview-slice-content-loginImage"
                :style="{ backgroundImage: 'url(' + backgroundPictureUrl + ')' }">
                <div class="login-box" :style="`background-image: url(${getLoginBox()})`"></div>
            </div>
            <div class="login-preview-slice-content-bottomImage">
                <div class="login-preview-slice-content-bottomImage-image"
                    :style="{ backgroundImage: 'url(' + belowPictureUrl + ')' }"
                ></div>
                <div class="login-preview-slice-content-bottomImage-text">Copyright © 众联成业科技有限公司 保留所有权利</div>
                <div class="login-preview-slice-content-bottomImage-text">备案号：浙ICP备2020031187号</div>
            </div>
        </div>
        <div class="login-preview-full-content" v-else>
            <div class="login-preview-full-content-image"
                :style="{ backgroundImage: 'url(' + fullPictureUrl + ')' }"
            >
                <div class="login-box" :style="`background-image: url(${getLoginBox()})`"></div>
                <div class="login-preview-full-content-image-text">Copyright © 众联成业科技有限公司 保留所有权利</div>
                <div class="login-preview-full-content-image-text">备案号：浙ICP备2020031187号</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'

export default {
    name: 'login-preview',
    props: {
        // 背景图显示类型，slice：上下层模式，full：全屏
        backgroundType: {
            type: String,
            default: 'slice'
        },
        // slice模式下的上层背景图片
        backgroundPictureUrl: {
            type: String,
            default: '',
        },
        // slice模式下的下层背景图片
        belowPictureUrl: {
            type: String,
            default: ''
        },
        // full模式下的全屏背景图片
        fullPictureUrl: {
            type: String,
            default: ''
        }
    },
    methods: {
        getLoginBox() {
            return getOssUrl('/setting/pc_login_box.png');
        },
    }
}
</script>

<style lang="scss" scoped>
.login-preview {
    width: 484px;
    height: 264px;
    border: 8px solid #E8E8E8;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: content-box;
    &-slice-content {
        &-loginImage {
            height: 143px;
            line-height: 143px;
            display: flex;
            align-items: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            .login-box {
                width: 110px;
                height: 126px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
                margin-left: 274px;
            }
        }
        &-bottomImage {
            display: flex;
            flex-direction: column;
            align-items: center;
            &-image {
                width: 100%;
                height: 68px;
                margin: 0 0 14px 0;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
            }
            &-text {
                font-size: 3.65px;
                color: #595959;
            }
            &-text:first-child {
                margin-top: 24px;
            }
        }
    }
    &-full-content {
        height: 272px;
        &-image {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top left;
            .login-box {
                width: 110px;
                height: 130px;
                margin: 73px 0 47px 0;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
                opacity: 0.9;
            }
            &-text {
                font-size: 3.65px;
                color: #FFFFFF;
            }
        }
    }
}
</style>